<?php
use lvzmen\yii\cms\widgets\markdown\Markdown;
use lvzmen\yii\cms\widgets\markdown\Example;
use yii\bootstrap\Nav;

$html = [
    "markdown0" => <<<M0
## 导航（Nav）
`Bootstrap` 中的导航组件都依赖同一个 `.nav` 类，状态类也是共用的，常用的示例如下：
M0,
    "example0" => [
        "html" =>
            Nav::widget([
                'items' => [
                    [
                        'label' => 'Home',
                        'url' => ['bootstrap3#'],
                        'options' => ["class" => "active"]
                    ],
                    [
                        'label' => 'Help',
                        'url' => ['bootstrap3#'],
                    ],
                    [
                        'label' => 'Dropdown',
                        'items' => [
                            ['label' => 'Dropdown A', 'url' => 'bootstrap3#'],
                            ['label' => 'Dropdown B', 'url' => 'bootstrap3#'],
                        ],
                    ],

                ],
                'options' => ['class' =>'nav-pills'],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Nav;
echo Nav::widget([
    'items' => [
        [
            'label' => 'Home',
            'url' => ['bootstrap3#'],
            'options' => ["class" => "active"]
        ],
        [
            'label' => 'Help',
            'url' => ['bootstrap3#'],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'Dropdown A', 
                    'url' => 'bootstrap3#'
                ],
                [
                    'label' => 'Dropdown B', 
                    'url' => 'bootstrap3#'
                ],
            ],
        ],
        
    ],
    'options' => ['class' =>'nav-pills'],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w0" class="nav-pills nav">
    <li>
        <a href="/yii2/bootstrap3#">Home</a>
    </li>
    <li>
        <a href="/yii2/bootstrap3#">Help</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
            Dropdown <span class="caret"></span>
        </a>
        <ul id="w1" class="dropdown-menu">
            <li>
                <a href="bootstrap3#" tabindex="-1">
                Dropdown A
                </a>
            </li>
            <li>
                <a href="bootstrap3#" tabindex="-1">
                    Dropdown B
                </a>
            </li>
        </ul>
    </li>
</ul>
EB0
    ],
    "markdown5" => <<<M0
## 垂直导航
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 `.nav-stacked` 类，如下：
M0,
    "example5" => [
        "html" =>
            Nav::widget([
                'items' => [
                    [
                        'label' => 'Home',
                        'url' => ['bootstrap3#'],
                        'options' => ['class' => 'active']
                    ],
                    [
                        'label' => 'Help',
                        'url' => ['bootstrap3#'],
                    ],
                    [
                        'label' => 'Dropdown',
                        'items' => [
                            ['label' => 'Dropdown A', 'url' => 'bootstrap3#'],
                            ['label' => 'Dropdown B', 'url' => 'bootstrap3#'],
                        ],
                    ],

                ],
                'options' => ['class' =>'nav-pills nav-stacked'],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Nav;
echo Nav::widget([
    'items' => [
        [
            'label' => 'Home',
            'url' => ['bootstrap3#'],
            'options' => ["class" => "active"]
        ],
        [
            'label' => 'Help',
            'url' => ['bootstrap3#'],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'Dropdown A', 
                    'url' => 'bootstrap3#'
                ],
                [
                    'label' => 'Dropdown B', 
                    'url' => 'bootstrap3#'
                ],
            ],
        ],
        
    ],
    'options' => [
        'class' =>'nav-pills nav-stacked'
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w0" class="nav-pills nav-stacked nav">
    <li>
        <a href="/yii2/bootstrap3#">Home</a>
    </li>
    <li>
        <a href="/yii2/bootstrap3#">Help</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
            Dropdown <span class="caret"></span>
        </a>
        <ul id="w1" class="dropdown-menu">
            <li>
                <a href="bootstrap3#" tabindex="-1">
                Dropdown A
                </a>
            </li>
            <li>
                <a href="bootstrap3#" tabindex="-1">
                    Dropdown B
                </a>
            </li>
        </ul>
    </li>
</ul>
EB0
    ],

    "markdown6" => <<<M0
## 100%宽度
通过 `.nav-justified` 类可以很容易实现让导航条占据100%的宽度，示例如下：
M0,
    "example6" => [
        "html" =>
            Nav::widget([
                'items' => [
                    [
                        'label' => 'Home',
                        'url' => ['bootstrap3#'],
                        'options' => ['class' => 'active']
                    ],
                    [
                        'label' => 'Help',
                        'url' => ['bootstrap3#'],
                    ],
                    [
                        'label' => 'Dropdown',
                        'items' => [
                            ['label' => 'Dropdown A', 'url' => 'bootstrap3#'],
                            ['label' => 'Dropdown B', 'url' => 'bootstrap3#'],
                        ],
                    ],

                ],
                'options' => ['class' =>'nav-pills nav-justified'],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Nav;
echo Nav::widget([
    'items' => [
        [
            'label' => 'Home',
            'url' => ['bootstrap3#'],
            'options' => ["class" => "active"]
        ],
        [
            'label' => 'Help',
            'url' => ['bootstrap3#'],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'Dropdown A', 
                    'url' => 'bootstrap3#'
                ],
                [
                    'label' => 'Dropdown B', 
                    'url' => 'bootstrap3#'
                ],
            ],
        ],
        
    ],
    'options' => [
        'class' =>'nav-pills nav-justified'
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w0" class="nav-pills nav-justified nav">
    <li>
        <a href="/yii2/bootstrap3#">Home</a>
    </li>
    <li>
        <a href="/yii2/bootstrap3#">Help</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
            Dropdown <span class="caret"></span>
        </a>
        <ul id="w1" class="dropdown-menu">
            <li>
                <a href="bootstrap3#" tabindex="-1">
                Dropdown A
                </a>
            </li>
            <li>
                <a href="bootstrap3#" tabindex="-1">
                    Dropdown B
                </a>
            </li>
        </ul>
    </li>
</ul>
EB0
    ],

    "markdown1" => <<<M0
## 标签页
导航小部件也可以用于布置成标签页，只需要把上述`.nav-pills`类换成`.nav-tabs`类即可，如下：
M0,
    "example1" => [
        "html" =>
            Nav::widget([
                'items' => [
                    [
                        'label' => 'Home',
                        'url' => ['bootstrap3#'],
                        'options' => ['class' => 'active']
                    ],
                    [
                        'label' => 'Help',
                        'url' => ['bootstrap3#'],
                    ],
                    [
                        'label' => 'Dropdown',
                        'items' => [
                            ['label' => 'Dropdown A', 'url' => 'bootstrap3#'],
                            ['label' => 'Dropdown B', 'url' => 'bootstrap3#'],
                        ],
                    ],

                ],
                'options' => ['class' =>'nav-tabs'],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Nav;
echo Nav::widget([
    'items' => [
        [
            'label' => 'Home',
            'url' => ['bootstrap3#'],
            'options' => ['class' => 'active']
        ],
        [
            'label' => 'Help',
            'url' => ['bootstrap3#'],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'Dropdown A', 
                    'url' => 'bootstrap3#'
                ],
                [
                    'label' => 'Dropdown B', 
                    'url' => 'bootstrap3#'
                ],
            ],
        ],
        
    ],
    'options' => ['class' =>'nav-tabs'],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w0" class="nav-tabs nav">
    <li class="active">
        <a href="/yii2/bootstrap3#">Home</a>
    </li>
    <li>
        <a href="/yii2/bootstrap3#">Help</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
            Dropdown <span class="caret"></span>
        </a>
        <ul id="w1" class="dropdown-menu">
            <li>
                <a href="bootstrap3#" tabindex="-1">
                Dropdown A
                </a>
            </li>
            <li>
                <a href="bootstrap3#" tabindex="-1">
                    Dropdown B
                </a>
            </li>
        </ul>
    </li>
</ul>
EB0
    ],
    "markdown2" => <<<EM2
> <span style="font-weight: 600;font-size: 20px;">注意：</span>  
上述的标签页效果具有`url`属性，也就是说点击后会跳转到目标页面，无法实现常用的`tab`切换效果，因此如果把`url`设置为`#home`的方式，确实可以实现`tab`理想效果，不过这个功能单独靠`Nav`小部件却无法实现，因为这个小部件无法实现`tab`内容的输入，因此需要修改。  
EM2
    ,
    "example2" => [
        "html" =>
            \lvzmen\yii\cms\widgets\navs\Tabs::widget([
                'items' => [
                    [
                        'label' => 'Home',
                        'options' => ['class' => 'active'],
                        'content' => "This is home tab;"
                    ],
                    [
                        'label' => 'Profile',
                        'content' => "This is profile tab;"
                    ],
                    [
                        'label' => 'messages',
                        'content' => "This is messages tab;"
                    ],
                    [
                        'label' => 'settings',
                        'content' => "This is settings tab;"
                    ],
                ],

            ])
        ,
        "yii" => <<<EY0
use \lvzmen\yii\cms\widgets\\navs\Tabs;
echo Tabs::widget([
    'items' => [
        [
            'label' => 'Home',
            'options' => ['class' => 'active'],
            'content' => "This is home tab;"
        ],
        [
            'label' => 'Profile',
            'content' => "This is profile tab;"
        ],
        [
            'label' => 'messages',
            'content' => "This is messages tab;"
        ],
        [
            'label' => 'settings',
            'content' => "This is settings tab;"
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<div>
    <ul id="w4" class="nav-tabs nav">
        <li class="active" role="presentation">
            <a 
                href="#tab_6145ad28afb5a" 
                data-toggle="tab" 
                aria-controls="tab_6145ad28afb5a">
                Home
            </a>
        </li>    
        <li role="presentation">
            <a 
                href="#tab_6145ad28afb5c" 
                data-toggle="tab" 
                aria-controls="tab_6145ad28afb5c">
                Profile
            </a>
        </li>
        <li role="presentation">
            <a 
                href="#tab_6145ad28afb5d" 
                data-toggle="tab" 
                aria-controls="tab_6145ad28afb5d">
                messages
            </a>
        </li>
        <li role="presentation">
            <a 
                href="#tab_6145ad28afb5e" 
                data-toggle="tab" 
                aria-controls="tab_6145ad28afb5e">
                settings
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab_6145ad28afb5a">
            This is home tab;
        </div>
        <div role="tabpanel" class="tab-pane " id="tab_6145ad28afb5c">
            This is profile tab;
        </div>
        <div role="tabpanel" class="tab-pane " id="tab_6145ad28afb5d">
            This is messages tab;
        </div>
        <div role="tabpanel" class="tab-pane " id="tab_6145ad28afb5e">
            This is settings tab;
        </div>
    </div>
</div>
EB0
    ],
    "markdown4" => <<<M4
上述`\lvzmen\yii\cms\widgets\\navs\Tabs`小部件是对`Nav`进行扩展后的自定义小部件，其完整代码如下：
```php
<?php

namespace lvzmen\yii\cms\widgets\\navs;

use yii\base\Widget;
use yii\bootstrap\Nav;

class Tabs extends Widget
{
    public \$items = [];

    public function init()
    {
        parent::init(); // TODO: Change the autogenerated stub

        \$this->items = array_map(function (\$item){
            \$item["options"] = \$item["options"] ?? [];
            \$item["options"]["role"] = "presentation";
            \$id = "tab_" . uniqid();
            \$item["url"] = "#" . \$id;
            \$item["linkOptions"] = ["data-toggle" => "tab", "aria-controls" => \$id];
            return \$item;
        }, \$this->items);
    }


    public function renderBody(){

        \$html = "<div>";

        \$html .= Nav::widget([
            "items" => \$this->items,
            'options' => ['class' =>'nav-tabs'],
        ]);

        \$html .= '<div class="tab-content">';
        foreach (\$this->items as \$item){
            \$item["options"] = \$item["options"] ?? [];
            \$class = \$item["options"]["class"] ?? "";
            \$active = strpos(\$class, "active") !== false ? "active" : "";
            \$html .= '<div role="tabpanel" class="tab-pane '. \$active .'" id="'. \$item['linkOptions']['aria-controls'] .'">';
            \$html .= \$item["content"] ?? "";
            \$html .= '</div>';
        }
        \$html .= '</div>';

        \$html .= "</div>";


        return \$html;

    }

    public function run()
    {
        return \$this->renderBody();
    }
}

```
M4
    ,
    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210918172633.png)
### 属性
- `items`: array    
导航列表。
- `encodeLabels`: bool  
是否把`label`的值进行html转码，默认为`true`；  
- `activateItems`: bool  
默认为`true`，会根据当前页面的`URL`自动激活对应菜单，即：添加`.active`类样式；  
- `activateParents`: bool  
默认为`true`，会根据当前页面的`URL`自动激活对应菜单的父菜单，对于有子菜单的情况下有效，即：添加`.active`类样式；  

M3



];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}